<template>
	<view class="content">
		<view style="display: flex;margin-top: 60px;margin-left: 20px;">
			<u-avatar size="100" src="https://cdn.uviewui.com/uview/album/1.jpg" style="margin-right: 10px;"></u-avatar>
			<u--text text="张三" size="30" bold></u--text>
		</view>

		<view style="display: flex;margin-top: 20px;">
			<view style="flex: 1;">
				<u--text text="10" bold size="28" align="center"></u--text>
				<u--text text="关注宝贝" align="center"></u--text>
			</view>
			<view style="flex: 1;">
				<u--text text="102" bold size="28" align="center"></u--text>
				<u--text text="浏览记录" align="center"></u--text>
			</view>
			<view style="flex: 1;">
				<u--text text="102" bold size="28" align="center"></u--text>
				<u--text text="福利卡券" align="center"></u--text>
			</view>
		</view>

		<view
			style="background-color: #ffffff;padding: 20rpx; margin: 30rpx;border-radius: 10rpx;  box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.5);">

			<u-grid :border="false" @click="click" col="4">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="60"></u-icon>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>

		</view>
		
		
		
		<view
			style="background-color: #ffffff;padding: 20rpx; margin: 30rpx;border-radius: 10rpx;  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);">
		
				
		<u-grid :border="false" @click="click" col="4">
			<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
				<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="60"></u-icon>
				<text class="grid-text">{{baseListItem.title}}</text>
			</u-grid-item>
		</u-grid>
		
		</view>
		


	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseList: [{
						name: 'photo',
						title: '待付款'
					},
					{
						name: 'lock',
						title: '待发货'
					},
					{
						name: 'star',
						title: '已发货'
					},
					{
						name: 'star',
						title: '已'
					},
				],
				baseList2: [{
						name: 'photo',
						title: '收货地址'
					},
					{
						name: 'lock',
						title: '优惠券'
					},
					{
						name: 'star',
						title: '领券中心'
					},
					{
						name: 'star',
						title: '设置'
					},
					{
							name: 'photo',
							title: '客服'
						},
						{
							name: 'lock',
							title: '优惠券'
						},
						{
							name: 'star',
							title: '领券中心'
						},
						{
							name: 'star',
							title: '设置'
						},
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		background-color: #F8FAFD;
	}
</style>

<style lang="scss" scoped>
	.content {}
</style>